import React from "react";
import { Category as CategoryTree } from './categoryProps';
import bem from '@/utils/bem';
import { Image } from 'antd-mobile';

export interface CategoryPaneProps {
    isLazy: boolean,
    categoryChild: CategoryTree[]
}

const CategoryPane: React.FC<CategoryPaneProps> = (props) => {
    const {
        isLazy,
        categoryChild
    } = props;

    const b = bem('category');

    if (!categoryChild || categoryChild.length == 0) {
        return <div>暂无分类数据</div>;
    }

    return (
        <div className={b('right')}>
            {
                categoryChild.map((item, index) => (
                    <div className={b('pane')} data-index={index} key={index}>
                        <div className={b('pane__title')}>{item.cateName}</div>
                        <div className={b('pane__list')}>
                            {
                                item.children && item.children?.map((child, childIndex) => (
                                    <div className={b('pane__list__item')} key={childIndex}>
                                        <div className={b('pane__list__item-img')}>
                                            <Image src={child.cateImg} lazy={isLazy}></Image>
                                        </div>
                                        <div className={b('pane__list__item-name')}>{child.cateName}</div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                ))
            }
        </div>
    )
}

export default CategoryPane;